<template>
  <qui-page :data-qui-theme="theme" class="content bg">
    <view v-if="loaded && status">
      <!--<scroll-view
        scroll-y="true"
        scroll-with-animation="true"
        show-scrollbar="false"
        class="scroll-y"
        @scrolltolower="pullDown"
      >-->
      <view class="scroll-y">
        <view class="content" v-if="status">
          <view class="ft-gap">
            <view class="bg-white">
              <view class="detail-tip" v-if="thread.isApproved == 0">
                {{ t.examineTip }}
              </view>

              <view class="detail-tip" v-else-if="post.isApproved == 0">
                {{ t.commentTip }}
              </view>
              <qui-topic-content
                :theme-parts="themeParts"
                :topic-status="thread.isApproved"
                :follow-show="post.user.follow != null"
                :avatar-url="post.user.avatarUrl"
                :user-name="post.user.username"
                :is-real="post.user.isReal"
                :theme-time="post.createdAt"
                :theme-content="newContentHtml"
                :user-role="post.user.groups ? post.user.groups : ''"
                :images-list="post.images"
                @personJump="personJump(post.user._jv.id)"
              >
                <!-- 关注 -->
                <!-- <view slot="follow" :key="followStatus" v-if="post.user.follow != null">
                  <view
                    class="themeItem__header__follow"
                    @tap="post.user.follow === 0 ? addFollow(post.user) : deleteFollow(post.user)"
                  >
                    <qui-icon
                      class="icon-follow"
                      :name="post.user.follow === 0 ? 'icon-follow' : 'icon-each-follow'"
                      :color="
                        post.user.follow === 0
                          ? '#777'
                          : post.user.follow === 1
                          ? themeColor
                          : '#ff8888'
                      "
                    ></qui-icon>
                    <text>
                      {{
                        post.user.follow === 0
                          ? i18n.t('profile.following')
                          : post.user.follow === 1
                          ? i18n.t('profile.followed')
                          : i18n.t('profile.mutualfollow')
                      }}
                    </text>
                  </view>
                </view> -->
                <!-- 更多操作 -->
                <view slot="more" @click="moreClick">
                  <view class="det-ft-operaCli">
                    <view class="det-ft-more">
                      <qui-icon name="icon-gengduo" class="icon-gengduo" style="font-size: 40rpx;">
                        >
                      </qui-icon>
                    </view>
                  </view>
                </view>
              </qui-topic-content>
              <view class="thread-box" v-if="loadDetailStatus && !thread.isApproved == 0">
                <view class="thread" v-if="thread.isApproved == 1">
                  <view class="thread__header">
                    <view class="thread__header__img" @click="personJump(thread.user._jv.id)">
                      <qui-avatar :user="thread.user" :is-real="thread.user.isReal" />
                    </view>
                    <view class="thread__header__title">
                      <view class="thread__header__title__top">
                        <span
                          class="thread__header__title__username"
                          @click="personJump(thread.user._jv.id)"
                        >
                          {{ thread.user.username }}
                        </span>
                        <span
                          class="thread__header__title__isAdmin"
                          v-for="(group, gindex) in thread.user.groups"
                          :key="gindex"
                          :class="group.isDisplay ? 'thread__header__title__isAdminColor' : ''"
                        >
                          {{ group.isDisplay ? `${group.name}` : '' }}
                        </span>
                      </view>
                      <view class="thread__header__title__time">
                        {{ localTime }}
                      </view>
                    </view>
                    <image
                      v-if="thread.price > 0"
                      src="@/static/payment.png"
                      alt
                      class="addFine"
                      :class="thread.isEssence ? 'right40' : ''"
                    ></image>
                    <image
                      v-if="thread.isEssence"
                      src="@/static/essence.png"
                      alt
                      class="addFine"
                    ></image>
                  </view>

                  <view class="thread__content" @click="contentClick">
                    <view class="thread__content__text">
                      <qui-uparse :content="thread.title" v-if="thread.type == 1"></qui-uparse>
                      <qui-uparse :content="thread.firstPost.summary" v-else></qui-uparse>
                    </view>
                  </view>
                </view>
              </view>
              <view>
                <!-- 点赞用户列表 -->
                <qui-person-list
                  :type="t.giveLike"
                  :person-num="post.likeCount"
                  :limit-count="limitShowNum"
                  :person-list="likedUsers"
                  :btn-show="false"
                  @personJump="personJump"
                ></qui-person-list>
              </view>
              <view class="det-con-ft">
                <view
                  v-if="post.canHide"
                  class="det-con-ft-child"
                  @click="deleteReply(post._jv.id, post.canHide)"
                >
                  <qui-icon name="icon-delete" class="qui-icon"></qui-icon>
                  <view>{{ t.delete }}</view>
                </view>
                <view
                  class="det-con-ft-child"
                  @click="postLikeClick(post._jv.id, '1', post.canLike, post.isLiked)"
                >
                  <qui-icon
                    :name="post.isLiked ? 'icon-liked' : 'icon-like'"
                    class="qui-icon"
                  ></qui-icon>
                  <view class="ft-child-word">
                    {{ post.isLiked ? t.giveLikeAlready : t.giveLike }}
                  </view>
                </view>
                <view
                  class="det-con-ft-child"
                  @click="replyComment(post._jv.id, thread.canReply, '0')"
                >
                  <qui-icon name="icon-comments" class="qui-icon"></qui-icon>
                  <view>{{ t.reply }}</view>
                </view>
              </view>
            </view>
            <!-- 评论 -->
            <view class="comment">
              <view class="comment-top">
                <view
                  class="comment-num"
                  :style="{ paddingBottom: post.postCount > 1 ? '0' : '40rpx' }"
                >
                  {{ post.replyCount }}{{ t.item }}{{ t.comment }}
                </view>
                <view class="comment-sort" v-if="thread.postCount > 1">
                  <view class="comment-sort-operaCl" @click="sortOperaClick">
                    <qui-icon
                      name="icon-sort1"
                      class="icon-management"
                      color="#777"
                      size="30"
                    ></qui-icon>
                  </view>
                  <view>
                    <qui-drop-down
                      posival="absolute"
                      :show="sortSeleShow"
                      :list="sortSelectList"
                      :top="60"
                      :right="0"
                      :width="220"
                      @click="sortSelectChoice"
                    ></qui-drop-down>
                  </view>
                </view>
              </view>
              <view v-if="postComments.length > 0">
                <view v-for="(commentPost, index) in postComments" :key="index">
                  <qui-topic-comment
                    v-if="!commentPost.isDeleted"
                    :comment-type="1"
                    :post-id="commentPost._jv.id"
                    :comment-user="
                      commentPost.commentUserId ? commentPost.commentUser : commentUser
                    "
                    :comment-post-id="commentPost.commentPostId ? commentPost.commentPostId : ''"
                    :comment-avatar-url="commentPost.user.avatarUrl"
                    :user-name="commentPost.user.username"
                    :is-real="commentPost.user.isReal"
                    :is-liked="commentPost.isLiked"
                    :user-role="commentPost.user.groups ? commentPost.user.groups : ''"
                    :comment-time="commentPost.createdAt"
                    :comment-status="commentPost.isApproved"
                    :comment-content="commentPost.contentHtml"
                    :comment-like-count="commentPost.likeCount"
                    :images-list="commentPost.images"
                    :reply-count="commentPost.replyCount"
                    :can-delete="commentPost.canHide"
                    :comment-show="true"
                    @personJump="personJump(commentPost.user.id)"
                    @commentLikeClick="
                      commentLikeClick(
                        commentPost._jv.id,
                        '4',
                        commentPost.canLike,
                        commentPost.isLiked,
                        index,
                        commentPost,
                      )
                    "
                    @commentJump="commentJump(commentPost._jv.id)"
                    @imageClick="imageClick"
                    @replyComment="
                      replyComment(
                        commentPost._jv.id,
                        thread.canReply,
                        '1',
                        commentPost.user._jv.id,
                      )
                    "
                    @deleteComment="
                      deleteComment(
                        commentPost._jv.id,
                        '3',
                        commentPost.canHide,
                        commentPost.isDeleted,
                        commentPost,
                      )
                    "
                  ></qui-topic-comment>
                </view>
              </view>
            </view>
          </view>
          <qui-load-more
            :status="loadingType"
            :content-text="{
              contentdown: c.contentdown,
              contentrefresh: c.contentrefresh,
              contentnomore: contentnomoreVal,
            }"
          ></qui-load-more>
        </view>
      </view>
      <!--</scroll-view>-->
      <!--#ifdef MP-WEIXIN-->
      <!--适配小程序底部弹框-->
      <view class="det-ft"></view>
      <!-- #endif -->
      <!--轻提示-->
      <qui-toast ref="toast"></qui-toast>
      <!--回复弹框-->
      <uni-popup ref="commentPopup" type="bottom" class="comment-popup-box">
        <view class="comment-popup" v-if="commentPopupStatus">
          <view class="comment-popup-topbox">
            <view class="comment-popup-top">
              <view class="comment-popup-top-l">
                <qui-icon
                  name="icon-expression"
                  class="comm-icon"
                  :size="40"
                  @click="expressionClick"
                ></qui-icon>
                <qui-icon
                  name="icon-call"
                  :size="40"
                  class="comm-icon"
                  @click="callClick"
                ></qui-icon>
              </view>
              <view class="text-word-tip">
                {{ t.canWrite }}{{ 5000 - textAreaValue.length }}{{ t.word }}
              </view>
            </view>
            <qui-emoji
              v-if="emojiShow"
              position="absolute"
              top="104rpx"
              border-radius="10rpx"
              :color="emojiShow ? '#1878F3' : '#777'"
              @click="getEmojiClick"
            ></qui-emoji>
          </view>

          <view class="comment-content-box">
            <view class="comment-content">
              <textarea
                ref="commentText"
                :focus="focusVal"
                :maxlength="5000"
                class="comment-textarea"
                :placeholder="t.writeComments"
                placeholder-style="color:#b5b5b5;font-size: 28rpx;"
                placeholder-class="text-placeholder"
                :show-confirm-bar="barStatus"
                cursor-spacing="80"
                v-if="!emojiShow"
                v-model="textAreaValue"
                @blur="contBlur"
                @touchmove.stop="touchStop"
              />
              <view class="comment-textarea" v-show="emojiShow">
                {{ textAreaValue }}
              </view>
            </view>
            <qui-uploader
              :url="`${url}api/attachments`"
              :header="header"
              :form-data="formData"
              :count="3"
              name="file"
              async-clear
              ref="upload"
              @change="uploadChange"
              @clear="uploadClear"
            ></qui-uploader>
          </view>
          <button class="publish-btn" @click="publishClick()">
            {{ t.publish }}
          </button>
        </view>
      </uni-popup>
      <uni-popup ref="deletePopup" type="center">
        <uni-popup-dialog
          type="warn"
          :content="deleteTip"
          :before-close="true"
          @close="handleClickCancel"
          @confirm="handleClickOk"
        ></uni-popup-dialog>
      </uni-popup>
      <!--更多操作弹框-->
      <uni-popup ref="morePopup" type="bottom">
        <view class="popup-share">
          <view class="popup-share-content popup-share-content-inner">
            <view
              class="popup-share-content-box"
              v-if="post.canHide"
              @click="moreContent(0, post._jv.id, post.canHide)"
            >
              <view class="popup-share-content-image">
                <view class="popup-share-box">
                  <qui-icon
                    class="content-image"
                    name="icon-delete"
                    size="46"
                    color="#777777"
                  ></qui-icon>
                </view>
              </view>
              <text class="popup-share-content-text">{{ t.delete }}</text>
            </view>
            <view class="popup-share-content-box" @click="moreContent(1)">
              <view class="popup-share-content-image">
                <view class="popup-share-box">
                  <qui-icon
                    class="content-image"
                    name="icon-jubao"
                    size="46"
                    color="#777777"
                  ></qui-icon>
                </view>
              </view>
              <text class="popup-share-content-text">{{ i18n.t('report.reportTitle') }}</text>
            </view>
          </view>
          <view class="popup-share-content-space"></view>
          <text class="popup-share-btn" @click="moreCancel">{{ c.cancel }}</text>
        </view>
      </uni-popup>
      <!--举报弹框-->
      <uni-popup ref="reportPopup" type="bottom">
        <qui-report
          ref="report"
          :current-login-id="currentLoginId"
          :thread-id="threadId"
          :comment-id="commentId"
          :report-type="2"
          @reportClose="reportClose"
        ></qui-report>
      </uni-popup>
    </view>
    <view
      v-else-if="(loadingStatus && !loaded && !thread.isDeleted) || (loadingStatus && !status)"
      class="loading"
    >
      <u-loading :size="60"></u-loading>
    </view>
    <qui-page-message
      v-else-if="thread.isDeleted || post.isDeleted || !loaded || !status"
    ></qui-page-message>
  </qui-page>
</template>

<script>
/* eslint-disable */
import { status, utils } from '@/library/jsonapi-vuex/index';
import { mapState, mapMutations } from 'vuex';
import user from '@/mixin/user';
import { time2DateAndHM } from '@/utils/time';
import { DISCUZ_REQUEST_HOST } from '@/common/const';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog';
import { getCurUrl } from '@/utils/getCurUrl';
import loginModule from '@/mixin/loginModule';
import forums from '@/mixin/forums';
import { modifyPostContentHtml } from '@/utils/transformHtml';
import { get } from 'lodash';

export default {
  components: { uniPopupDialog },
  mixins: [user, loginModule, forums],
  data() {
    return {
	    newContentHtml: "",//处理后的html文本
      navTitle: '评论详情页', // 导航栏标题
      threadId: '',
      commentId: '',
      thread: {},
      // post: {},
      loadDetailStatus: {},
      loaded: false,
      status: false,
      loadingStatus: true,
      topicStatus: 0, // 0 是不合法 1 是合法 2 是忽略
      posts: [],
      commentIndex: '', //当前回复的index
      postComments: [], //当前评论的回复列表
      postsStatus: false,
      footerShow: true, // 默认显示底部
      commentShow: false, // 显示评论
      commentPopupStatus: false, //回复弹框内容状态是否显示
      emojiShow: false, //表情组件显示状态
      textAreaValue: '', // 评论输入框
      barStatus: false, // 是否显示输入框获取焦点时完成的那一栏
      uploadFile: [], //上传的文件
      publishClickStatus: true, //发布按钮点击状态
      focusVal: true, // 默认输入框获取焦点状态
      header: {},
      formData: {}, // 图片请求data
      placeholderColor: 'color:#b5b5b5', // 默认textarea的placeholder颜色
      isLiked: false, // 主题点赞状态
      role: '管理员',
      isActive: true,
      seleShow: false, // 默认收起管理菜单
      selectList: [
        { text: '编辑', type: '0' },
        { text: '精华', type: '2' },
        { text: '置顶', type: '3' },
        { text: '删除', type: '4' },
      ], // 管理菜单

      limitShowNum: 12,
      paidStatus: false, // 是否有已支付数据
      rewardStatus: false, // 是否已有打赏数据
      likedStatus: false, // 是否已有点赞数据
      commentStatus: {}, //回复状态
      commentId: '', //当前评论的Id
      loadingType: 'more', // 上拉加载状态
      scrollTop: 0,
      pageNum: 1, //这是主题回复当前页数
      pageSize: 20, //这是主题回复每页数据条数
      contentnomoreVal: '', //数据加载状态提示 暂无评论/没有更多数据
      url: '',
      imageStatus: true, // 头像地址错误时显示默认头像
      likedUsers: [],
      deleteId: '', // 删除时的Id（包括主题id，评论Id，和图片id）
      deleteType: '', // 删除时的类型，3为评论的回复删除，4为评论删除
      deletePostType: '', // 删除回复时传给请求接口的类型
      deletePostCanStatus: '', // 是否可以删除该条内容
      deletePostIsStatus: '', // 删除时的状态
      deletePost: '', // 删除时的整个post数据
      deleteIndex: '', // 删除图片时的Index
      deleteTip: '确定删除吗？', // 删除提示
      deleteImgId: '', // 删除时图片Id
      sortSeleShow: false, // 排序菜单状态
      sortSelectList: [
        { text: this.i18n.t('topic.sortTimeSequence'), type: '0', canOpera: true },
        { text: this.i18n.t('topic.sortTimeReverse'), type: '1', canOpera: true },
      ], // 评论排序菜单
      sortVal: 'createdAt', // 排序值
      followStatus: '', // 当前关注状态
      themeParts: 1, // 传给组件的类型
      replyCommentType: '0',
      commentPostId: '', // 当前回复的评论的id(楼中楼)
      commentUserId: '', // 当前回复的评论的用户id
      commentUser: {}, // 顾单新解决的楼中楼问题
    };
  },
  computed: {
    ...mapState({
      getAtMemberData: state => state.atMember.atMemberData,
    }),
    currentLoginId() {
      const userId = this.$store.getters['session/get']('userId');
      return parseInt(userId, 10);
    },
    post() {
      const post = this.$store.getters['jv/get'](`posts/${this.commentId}`);
	  //添加start
	  this.newContentHtml = modifyPostContentHtml(post.contentHtml);
	  //添加end
      let hasFirst = false;
      if (post.user && post.user.groups.length > 0) {
        post.user.groups = post.user.groups.filter(group => {
          if (group.isDisplay === true && !hasFirst) {
            hasFirst = true;
            return true;
          }
        });
      }
      this.likedUsers = post.likedUsers;
      return post;
    },
    // postList() {
    //   // console.log(this.$store.getters['jv/get']('posts'));
    //   return this.$store.getters['jv/get']('posts');
    // },
    // 语言包
    t() {
      return this.i18n.t('topic');
    },
    // core公共变量语言包
    c() {
      return this.i18n.t('core');
    },
    // 时间转化
    localTime() {
      if (this.thread.createdAt) {
        return time2DateAndHM(this.thread.createdAt ? this.thread.createdAt : '');
      }
    },
  },
  onLoad(option) {
    this.threadId = option.threadId;
    this.commentId = option.commentId;
    this.loadPost();
    this.loadThread();
    this.loadPostComments();
    this.url = DISCUZ_REQUEST_HOST;
    const token = uni.getStorageSync('access_token');

    this.header = {
      authorization: `Bearer ${token}`,
    };
    this.formData = {
      type: 1,
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    const _this = this;
    _this.pageNum = 1;
    _this.postComments = [];
    setTimeout(function() {
      _this.loadPost();
      _this.loadThread();
      _this.loadPostComments();
      uni.stopPullDownRefresh();
    }, 1000);
  },
  // 上拉加载
  onReachBottom() {
    if (this.loadingType !== 'more') {
      return;
    }
    this.pageNum += 1;
    this.loadPostComments();
  },
  // 监听页面滚动，参数为Object
  onPageScroll(event) {
    this.scrollTop = event.scrollTop;
  },
  onUnload() {
    this.$store.dispatch('forum/setError', { loading: false });
  },
  onShow() {
    let atMemberList = '';
    this.getAtMemberData.map(item => {
      atMemberList += `@${item.username} `;
      return atMemberList;
    });
    this.textAreaValue = `${this.textAreaValue.slice(0, this.cursor) +
      atMemberList +
      this.textAreaValue.slice(this.cursor)}`;
    this.setAtMember([]);
  },
  methods: {
    ...mapMutations({
      setAtMember: 'atMember/SET_ATMEMBER',
    }),
    touchStop() {
      return;
    },
    // 阻止在评论详情页跳转评论详情页
    commentJump() {
      return;
    },
    //添加end
    // 唤起小程序原声分享
    onShareAppMessage(res) {
      // 来自页面内分享按钮
      if (res.from === 'button') {
        const threadShare = this.$store.getters['jv/get'](`/threads/${this.threadId}`);
        return {
          title: threadShare.type === 1 ? threadShare.title : threadShare.firstPost.summaryText,
          path: `/topic/index?id=${this.threadId}`,
        };
      }
      return {
        title: threadShare.type === 1 ? threadShare.title : threadShare.firstPost.summaryText,
        path: `/topic/index?id=${this.threadId}`,
      };
    },
    // 分享到朋友圈
    onShareTimeline() {
      return {
        title: this.forums.set_site.site_name,
        query: '',
      };
    },
    // 加载当前评论数据
    loadPost() {
      const params = {
        include: [
          'user',
          'user.groups',
          'likedUsers',
          'commentPosts',
          'commentPosts.user',
          'commentPosts.user.groups',
          'commentPosts.replyUser',
          'commentPosts.replyUser.groups',
          'commentPosts.mentionUsers',
          'commentPosts.images',
          'images',
          'attachments',
        ],
      };
      this.loadPostStatus = status.run(() =>
        this.$store
          .dispatch('jv/get', ['posts/' + this.commentId, { params }])
          .then(data => {
            if (data.isDeleted) {
              this.$store.dispatch('forum/setError', {
                code: 'TYPE_404',
                status: 500,
              });
              this.loaded = false;
            } else {

              // #ifndef MP-WEIXIN
              if (data.summaryText) {
                uni.setNavigationBarTitle({
                  title: data.summaryText.slice(0, 80),
                });
              } else {
                uni.setNavigationBarTitle({
                  title: this.t.commentPageTitle,
                });
              }
              // #endif
              this.loaded = true;
            }
            this.loadingStatus = false;
          })
          .catch(err => {
            this.loaded = false;
            this.loadingStatus = false;
            if (err.statusCode === 404) {
              this.$store.dispatch('forum/setError', {
                code: 'type_404',
                status: 500,
              });
            }
          }),
      );
    },
    // 加载当前回复的主题数据
    loadThread() {
      const params = {
        'filter[isDeleted]': 'no',
        include: ['user.groups', 'user', 'firstPost'],
      };
      this.loadDetailStatus = status.run(() =>
        this.$store
          .dispatch('jv/get', ['threads/' + this.threadId, { params }])
          .then(data => {
            if (data.isDeleted) {
              this.$store.dispatch('forum/setError', {
                code: 'thread_deleted',
                status: 500,
              });
              this.status = false;
            } else {
              this.status = true;
            }
            let hasFirst = false;
            if (data.user && data.user.groups.length > 0) {
              data.user.groups = data.user.groups.filter(group => {
                if (group.isDisplay === true && !hasFirst) {
                  hasFirst = true;
                  return true;
                }
              });
            }
            this.thread = data;
            this.loadingStatus = false;
          })
          .catch(err => {
            this.status = false;
            this.loadingStatus = false;
            if (err.statusCode === 404) {
              this.$store.dispatch('forum/setError', {
                code: 'type_404',
                status: 500,
              });
            }
          }),
      );
    },

    // post操作调用接口（包括type 1评论点赞，2删除评论，3删除评论的某条回复，4评论的回复点赞）
    postOpera(id, type, canStatus, isStatus, commentPost) {
      if (type == '1' && !canStatus) {
        this.$refs.toast.show({ message: this.t.noReplyLikePermission });
        return;
      }
      if (type == '4' && !canStatus) {
        this.$refs.toast.show({ message: this.t.noCommentLikePermission });
        return;
      }
      const jvObj = {
        type: 'posts',
        id: id,
      };
      let params = {};
      if (type == '1') {
        params = {
          _jv: jvObj,
          isLiked: !isStatus,
        };
      } else if (type == '2') {
        params = {
          _jv: jvObj,
          isDeleted: !isStatus,
        };
      } else if (type == '3') {
        params = {
          _jv: jvObj,
          isDeleted: !isStatus,
        };
      } else if (type == '4') {
        params = {
          _jv: jvObj,
          isLiked: !isStatus,
        };
      }
      this.$store
        .dispatch('jv/patch', params)
        .then(data => {
          if (type == '1') {
            const orgignPost = this.$store.getters['jv/get'](`posts/${id}`);
            // 当前评论点赞
            this.isLiked = data.isLiked;
            if (this.isLiked) {
              this.likedUsers.unshift(this.user);
              orgignPost._jv.relationships.likedUsers.data.unshift({
                type: this.user._jv.type,
                id: this.user._jv.id,
              });
            } else {
              this.likedUsers.forEach((value, key, item) => {
                value.id == this.user.id && item.splice(key, 1);
              });
              orgignPost._jv.relationships.likedUsers.data.forEach((value, key, item) => {
                value.id == this.user.id && item.splice(key, 1);
              });
            }
          } else if (type == '2') {
            if (data.isDeleted) {
              uni.navigateBack({
                delta: 1,
              });

              // uni.navigateBack({
              //   url: '/topic/index?id=' + this.threadId,
              // });
              this.$refs.toast.show({ message: this.t.deleteSuccessAndJumpToTopic });
            } else {
              this.$refs.toast.show({ message: this.t.deleteFailed });
            }
          } else if (type == '3') {
            let postArr = commentPost;
            postArr.isDeleted = data.isDeleted;
            commentPost = postArr;
            // this.post.replyCount--;
            const orgignPost = this.$store.getters['jv/get'](`posts/${this.commentId}`);
            orgignPost.replyCount -= 1;
            if (data.isDeleted) {
              // 回复的评论删除成功
              this.$u.event.$emit('deleteComment', { data: data, commentId: this.commentId });
              this.$refs.toast.show({ message: this.t.deleteSuccess });
            } else {
              // 回复的评论删除失败
              this.$refs.toast.show({ message: this.t.deleteFailed });
            }
          } else if (type == '4') {
            let postArr = commentPost;
            postArr.isLiked = data.isLiked;
            postArr.likeCount = data.likeCount;
            commentPost = postArr;
            if (data.isLiked) {
              // 评论点赞成功
            } else {
              // 评论点赞失败
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 主题回复调用接口
    postComment() {
      if (this.textAreaValue.length < 1) {
        this.$refs.toast.show({ message: this.t.replyContentCannotBeEmpty });
        this.publishClickStatus = true;
        return false;
      }
      const params = {
        _jv: {
          type: 'posts',
          relationships: {
            thread: {
              data: {
                type: 'threads',
                id: this.threadId,
              },
            },
          },
        },
        content: this.textAreaValue,
        isComment: true,
        replyId: this.commentId,
      };
      if (this.replyCommentType === '0') {
        // 这是二级回复
        // params.replyId = this.commentId;
      } else if (this.replyCommentType === '1') {
        // 这是三级回复
        params.commentPostId = this.commentPostId;
        params.commentUserId = this.commentUserId;
      }
      params._jv.relationships.attachments = {
        data: [],
      };
      if (this.uploadFile) {
        this.uploadFile.forEach(item => {
          params._jv.relationships.attachments.data.push({
            type: 'attachments',
            id: item.id,
          });
        });
      }
      this.$store
        .dispatch('jv/post', params)
        .then(res => {
          if (res.isApproved == 1) {
            let hasFirst = false;
            res.user.groups = res.user.groups.filter(group => {
              if (group.isDisplay === true && !hasFirst) {
                hasFirst = true;
                return true;
              }
              return false;
            });
			res.contentHtml = modifyPostContentHtml(res.contentHtml); //添加
            this.postComments.push(res);
            this.$u.event.$emit('addComment', { data: res, commentId: this.commentId });
          } else {
            this.$refs.toast.show({ message: this.t.publishExamineTip });
          }
          this.$refs.commentPopup.close();
          this.commentPopupStatus = false;
          this.publishClickStatus = true;
          const orgignPost = this.$store.getters['jv/get'](`posts/${this.commentId}`);
          orgignPost.replyCount += 1;
          this.textAreaValue = '';
          this.uploadFile = '';
        })
        .catch(err => {
          this.publishClickStatus = true;
          console.log(err);
        });
    },

    // 加载当前评论的回复数据
    loadPostComments() {
      const params = {
        'filter[isApproved]': 1,
        'filter[thread]': this.threadId,
        'page[number]': this.pageNum,
        'page[limit]': this.pageSize,
        'filter[isDeleted]': 'no',
        'filter[isComment]': 'yes',
        'filter[reply]': this.commentId,
        include: ['replyUser', 'commentUser', 'user.groups', 'user', 'images'],
        sort: this.sortVal,
      };
      this.loadPostCommentStatus = status.run(() =>
        this.$store.dispatch('jv/get', ['posts', { params }]).then(data => {
          delete data._jv;
          data.forEach((item, index) => {
            let hasFirst = false;
            data[index].user.groups = data[index].user.groups.filter(group => {
              if (group.isDisplay === true && !hasFirst) {
                hasFirst = true;
                return true;
              }
              return false;
            });
            item.contentHtml = modifyPostContentHtml(item.contentHtml);
          });
          this.postComments = [...this.postComments, ...data];
		      // 添加
          this.loadingType = data.length === this.pageSize ? 'more' : 'nomore';
          if (data.length == 0) {
            this.contentnomoreVal = this.t.noComment;
          } else {
            this.contentnomoreVal = this.t.noMoreData;
          }
          this.postsStatus = true;
        }),
      );
    },
    // 对象转数组
    limitArray(obj) {
      const arr = [];
      Object.values(obj).forEach(item => {
        arr.push(item);
      });
      return arr;
    },
    // 添加关注
    addFollow(userInfo) {
      if (!this.$store.getters['session/get']('isLogin')) {
        uni.setStorage({
          key: 'page',
          data: getCurUrl(),
        });
        // #ifdef MP-WEIXIN
        this.mpLoginMode();
        // #endif
        // #ifdef H5
        this.h5LoginMode();
        // #endif
      }
      const originUser = this.$store.getters['jv/get'](`users/${userInfo.id}`);
      const params = {
        _jv: {
          type: 'follow',
        },
        type: 'user_follow',
        to_user_id: userInfo.id,
      };
      this.$store.dispatch('jv/post', params).then(res => {
        if (res.is_mutual == 0) {
          this.post.user.follow = 1;
          originUser.follow = 1;
          this.followStatus = 1;
        } else {
          this.post.user.follow = 2;
          originUser.follow = 2;
          this.followStatus = 2;
        }
      });
    },
    // 取消关注
    deleteFollow(userInfo) {
      const originUser = this.$store.getters['jv/get'](`users/${userInfo.id}`);
      this.$store.dispatch('jv/delete', `follow/${userInfo.id}/1`).then(() => {
        this.post.user.follow = 0;
        originUser.follow = 0;
        this.followStatus = 0;
      });
    },
    // 点击排序
    sortOperaClick() {
      this.sortSeleShow = !this.sortSeleShow;
    },
    // 管理菜单内标签点击事件
    sortSelectChoice(param) {
      if (!this.$store.getters['session/get']('isLogin')) {
        uni.setStorage({
          key: 'page',
          data: getCurUrl(),
        });
        // #ifdef MP-WEIXIN
        this.mpLoginMode();
        // #endif
        // #ifdef H5
        this.h5LoginMode();
        // #endif
      }
      this.sortSeleShow = false;

      if (param.type === '0') {
        if (this.sortVal === 'createdAt') {
          this.$refs.toast.show({ message: this.t.itsAlreadyWantedSort });
        } else {
          this.refreshVal = false;

          this.$nextTick(() => {
            this.refreshVal = true;
          });
          this.sortVal = 'createdAt';
          this.postComments = [];
          this.loadPostComments();
        }
      } else if (param.type === '1') {
        if (this.sortVal === '-createdAt') {
          this.$refs.toast.show({ message: this.t.itsAlreadyWantedSort });
        } else {
          this.refreshVal = false;
          this.sortVal = '-createdAt';
          this.postComments = [];
          this.loadPostComments();
          this.$nextTick(() => {
            this.refreshVal = true;
          });
        }
      }
    },
    // 跳转到用户主页
    personJump(id) {
      if (id <= 0) {
        return;
      }
      uni.navigateTo({
        url: `/pages/profile/index?userId=${id}`,
      });
    },

    // 回复文本域失去焦点时，获取光标位置
    contBlur(e) {
      this.cursor = e.detail.cursor;
    },
    // 点击表情插入到文本域
    getEmojiClick(code) {
      let text = '';
      text = `${this.textAreaValue.slice(0, this.cursor) +
        code +
        this.textAreaValue.slice(this.cursor)}`;

      this.textAreaValue = text;
      this.emojiShow = false;
    },
    expressionClick() {
      this.emojiShow = !this.emojiShow;
    },
    // 点击@跳转到@页
    callClick() {
      uni.navigateTo({
        url: `/pages/user/at-member`,
      });
    },

    // 上传图片
    uploadChange(e) {
      this.uploadFile = e;
    },
    // 删除图片
    uploadClear(list, del) {
      const id = list.id;
      this.deleteType = 0;
      this.deleteImgId = id;
      this.deleteIndex = del;
      this.$refs.deletePopup.open();
      this.deleteTip = this.i18n.t('core.deleteImgSure');
      // this.delAttachments(id, del).then(() => {
      //   this.$refs.upload.clear(del);
      // });
    },
    // 删除图片
    delAttachments(id) {
      const params = {
        _jv: {
          type: 'attachments',
          id,
        },
      };

      return this.$store
        .dispatch('jv/delete', params)
        .then(res => {
          return res;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 评论点回复击发布事件
    publishClick() {
      this.publishClickStatus = false;
      this.postComment(this.commentId);
    },
    // // 评论点赞
    postLikeClick(postId, type, canStatus, isStatus) {
      this.postOpera(postId, type, canStatus, isStatus);
    },
    // 删除当前评论
    deleteReply(postId, canStatus) {
      this.$refs.deletePopup.open();
      this.deleteType = '2';
      this.deleteId = postId;
      this.deleteTip = this.i18n.t('core.deleteCommentSure');
      // this.postOpera(postId, '2');
    },
    // 删除评论的回复
    deleteComment(postId, type, canStatus, isStatus, commentPost) {
      this.$refs.deletePopup.open();
      this.deleteId = postId;
      this.deleteType = '3';
      this.deletePostCanStatus = canStatus;
      this.deletePostIsStatus = isStatus;
      this.deletePost = commentPost;
      this.deleteTip = this.i18n.t('core.deleteReplySure');
      // this.postOpera(postId, '3', canStatus, isStatus, commentPost);
    },
    handleClickOk() {
      this.$refs.deletePopup.close();
      if (this.deleteType === '2') {
        // 删除类型为当前评论
        this.postOpera(this.deleteId, '2');
      } else if (this.deleteType === '3') {
        // 删除类型为评论的回复
        this.postOpera(
          this.deleteId,
          '3',
          this.deletePostCanStatus,
          this.deletePostIsStatus,
          this.deletePost,
        );
      } else if (this.deleteType === 0) {
        // 删除类型为回复时上传的图片
        this.delAttachments(this.deleteImgId, this.deleteIndex).then(() => {
          this.$refs.upload.clear(this.deleteIndex);
          this.$refs.upload.getValue().forEach((value, key, item) => {
            value.id == this.deleteImgId && item.splice(key, 1);
          });
        });
      }
    },

    handleClickCancel() {
      this.$refs.deletePopup.close();
    },
    // 评论的回复
    replyComment(postId, canStatus, type, commentUserId) {
      if (!canStatus) {
        this.$refs.toast.show({ message: this.t.noReplyPermission });
      } else {
        this.replyCommentType = type;
        this.commentUserId = commentUserId;
        this.commentPostId = postId;
        this.$refs.commentPopup.open();
        this.commentPopupStatus = true;
      }
    },
    // 跳回到主题详情页
    contentClick() {
      const pages = getCurrentPages();
      const delta = pages.indexOf(pages[pages.length - 1]);
      if (get(pages, `[${delta - 1}].route`) === 'pages/topic/index') {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.navigateTo({
          url: `/topic/index?id=${this.threadId}`,
        });
      }
    },
    // 当前回复点赞
    commentLikeClick(postId, type, canLike, isLiked, commentIndex, commentPost) {
      this.commentIndex = commentIndex;
      this.postOpera(postId, '4', canLike, isLiked, commentPost);
    },
    // // 下拉加载
    // pullDown() {
    //   if (this.loadingType !== 'more') {
    //     return;
    //   }
    //   this.pageNum += 1;
    //   this.loadPostComments();
    // },
    // 头像失效
    imageError() {
      this.imageStatus = false;
    },
    // 更多操作-唤起弹框
    moreClick() {
      if (!this.$store.getters['session/get']('isLogin')) {
        uni.setStorage({
          key: 'page',
          data: getCurUrl(),
        });
        // #ifdef MP-WEIXIN
        this.mpLoginMode();
        // #endif
        // #ifdef H5
        this.h5LoginMode();
        // #endif
      }
      this.$refs.morePopup.open();
    },
    // 更多操作内标签选择
    moreContent(type, id, canHide) {
      this.moreCancel();
      if (type === 0) {
        this.deleteReply(id, canHide);
      } else {
        this.reportClick();
      }
    },
    // 关闭更多操作弹框
    moreCancel() {
      this.$refs.morePopup.close();
    },
    // 关闭举报弹框
    reportClose(val) {
      this.$refs.reportPopup.close();
    },
    // 举报
    reportClick() {
      this.$refs.reportPopup.open();
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/base/variable/global.scss';
@import '@/styles/base/theme/fn.scss';

page {
  padding: 0;
  margin: 0;
  font-size: $fg-f4;
  color: --color(--qui-FC-333);
}
* {
  padding: 0;
  margin: 0;
  font-size: $fg-f4;
  color: --color(--qui-FC-333);
}
.flex {
  display: flex;
}
.content {
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
}
.bg-white {
  background-color: --color(--qui-BG-2);
  border: 1px solid --color(--qui-BOR-ED);
}
.detail-tip {
  display: block;
  width: 100%;
  font-size: $fg-f4;
  line-height: 60rpx;
  color: #fff;
  text-align: center;
  background: --color(--qui-RED);
}
.detail-hd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  padding: 30rpx 40rpx 37rpx;
  box-sizing: border-box;
  .det-hd-per-head-box {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    .det-hd-per-head {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .det-hd-per-info {
    width: 400rpx;
    padding-left: 20rpx;
    .det-hd-per-name {
      margin-bottom: 10px;
      font-size: $fg-f4;
      font-weight: bold;
      line-height: 37rpx;
    }
    .det-hd-post-time {
      font-size: $fg-f2;
      line-height: 31rpx;
      color: --color(--qui-FC-AAA);
    }
  }
}
.det-hd-opera {
  align-self: flex-end;
  text-align: right;
  flex-shrink: 0;
  .essence {
    display: inline-block;
    width: 39rpx;
    height: 44rpx;
  }
}
.det-hd-operaCli {
  position: relative;
  z-index: 10;
  .det-hd-management {
    display: flex;
    flex-direction: row;
    line-height: 1;
    .icon-management {
      margin-right: 7rpx;
      font-size: 26rpx;
    }
  }
  font-size: $fg-f4;
  line-height: 40rpx;
}
//详情页帖子内容
.detail-post-content {
  padding: 0 40rpx 30rpx;
  text-align: left;
  .det-post-con {
    line-height: 45rpx;
  }
  .det-post-img-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 30rpx 0;
    // flex-wrap: wrap;
  }
  .det-post-img-box {
    .det-post-img {
      width: 314rpx;
      vertical-align: top;
    }
  }
  .det-post-tag-list {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    .det-post-tag {
      padding: 10rpx 20rpx;
    }
  }
}

.det-con-ft {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding: 0 40rpx 30rpx;
  box-sizing: border-box;
  &-child {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: $fg-f4;
    color: --color(--qui-FC-777);
    align-items: center;
    .qui-icon {
      margin-right: 17rpx;
      font-size: 30rpx;
    }
    * {
      font-size: $fg-f4;
      color: --color(--qui-FC-777);
    }
  }
}
.pad-top {
  padding-top: 0;
}
//评论
.comment {
  width: 100%;
  padding: 40rpx 0 0;
  margin-top: 30rpx;
  background: --color(--qui-BG-2);
  box-sizing: border-box;
}
.comment-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40rpx;
}
.comment-num {
  font-size: $fg-f4;
  font-weight: bold;
  line-height: 37rpx;
}
.comment-sort {
  position: relative;
  z-index: 1;
}
// .comment-num {
//   padding: 0 40rpx;
//   font-size: $fg-f4;
//   font-weight: bold;
//   line-height: 37rpx;
// }
.comment-child {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40rpx 0;
}
.comment-child-hd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .comment-child-per-head-box {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    .comment-child-per-head {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .comment-child-status {
    align-items: flex-start;
    padding-top: 8rpx;
    font-size: $fg-f3;
    line-height: 35rpx;
    color: --color(--qui-RED);
  }
}
.comment-child-per-info {
  width: 480rpx;
  padding-left: 20rpx;
  .comment-child-per-det {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .comment-child-per-name {
      margin-bottom: 10rpx;
      font-weight: bold;
      line-height: 37rpx;
    }
    .comment-chile-per-role {
      line-height: 37rpx;
      color: --color(--qui-FC-AAA);
    }
  }
  .comment-child-time {
    font-size: $fg-f2;
    line-height: 31rpx;
    color: --color(--qui-FC-AAA);
  }
}
.comment-child-con {
  padding: 20rpx 0 40rpx;
  font-size: $fg-f4;
  line-height: 45rpx;
  text-align: left;
  .comment-child-con-all {
    color: --color(--qui-LINK);
    * {
      color: --color(--qui-LINK);
    }
  }
}
.ft-gap {
  width: 100%;
  // margin-bottom: 80rpx;
}
.det-ft {
  position: fixed;
  bottom: 0;
  left: 0;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 0;
  line-height: 80rpx;
  background: --color(--qui-FC-FFF);
  box-shadow: 0 -3rpx 6rpx rgba(0, 0, 0, 0.05);
}
.det-ft-child {
  flex: auto;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  line-height: 80rpx;
  color: --color(--qui-FC-777);
  .qui-icon {
    margin-right: 18rpx;
    font-size: 30rpx;
    line-height: 80rpx;
  }
  .ft-child-word {
    font-size: $fg-f4;
    color: --color(--qui-FC-777);
  }
}
.comment-popup-box {
  width: 100%;
  padding-top: 40rpx;
}
.comment-popup {
  width: 100%;
  background: --color(--qui-BG-2);
  border-top-right-radius: 10rpx;
  border-top-left-radius: 10rpx;
  box-sizing: border-box;
}
.comment-popup-topbox {
  position: relative;
  padding: 40rpx 0 20rpx;
  margin: 0 40rpx;
}
.comment-popup-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .comment-popup-top-l {
    // flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 195rpx;
  }
  .text-word-tip {
    font-size: $fg-f2;
    line-height: 1;
    color: --color(--qui-FC-777);
  }
  .comm-icon {
    flex: 1;
    color: --color(--qui-FC-777);
  }
}
.comment-content-box {
  padding: 0 40rpx 30rpx 30rpx;
  .comment-content {
    width: 100%;
    height: 260rpx;
    padding: 20rpx 20rpx 0;
    overflow: hidden;
    background: --color(--qui-FC-GRAY);
    border: 1px solid --color(--qui-FC-DDD);
    border-radius: 7rpx;
    box-sizing: border-box;
  }
  .comment-textarea {
    width: 100%;
    height: 220rpx;
    min-height: 70rpx;
    font-size: $fg-f4;
    line-height: 37rpx;
  }
  .text-placeholder {
    font-size: 28rpx;
  }
}

.publish-btn {
  width: 100%;
  height: 100rpx;
  font-size: $fg-f4;
  line-height: 100rpx;
  color: --color(--qui-FC-FFF);
  text-align: center;
  background: --color(--qui-MAIN);
  /* #ifdef H5-PLAY || MP-WEIXIN-PLAY */
  background: #1878F3;
  /* #endif */
  border-radius: 0;
}

.popup-share {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: column;
  /* #endif */
  background: --color(--qui-BG-2);
}
.popup-share-box {
  width: 120rpx;
  height: 120rpx;
  line-height: 120rpx;
  background: --color(--qui-BG-40);
  border-radius: 10px;
}
.popup-share-content {
  padding-top: 40rpx;
  padding-right: 97rpx;
  padding-left: 98rpx;
}
.popup-share-content-inner {
  padding-right: 96px;
  padding-left: 98px;
}
.popup-share-content-box {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  height: 164rpx;
  // background: --color(--qui-BG-2);
}
.popup-share-content-image {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: center;
  // align-items: center;
  width: 120rpx;
  height: 120rpx;
  overflow: hidden;
  border-radius: 7rpx;
}
.content-image {
  width: 60rpx;
  height: 60rpx;
  margin: 35rpx;
  line-height: 60rpx;
}
.popup-share-content-text {
  padding-top: 5px;
  font-size: $fg-f3;
  color: --color(--qui-FC-TAG);
}
.popup-share-content-space {
  width: 100%;
  height: 9rpx;
  background: --color(--qui-FC-DDD);
}
.thread-box {
  padding: 50rpx 40rpx 80rpx;
}
.thread {
  padding: 20rpx;
  background: --color(--qui-BG-ED);
  border-radius: 5rpx;
  &__header {
    position: relative;
    display: flex;
    width: 100%;
    height: 80rpx;
    margin-bottom: 12rpx;
    &__img {
      width: 80rpx;
      height: 80rpx;
      margin-right: 18rpx;
      background: #ccc;
      border-radius: 100%;

      image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }

    &__title {
      flex: 1;

      &__top {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 37rpx;
        margin-bottom: 10rpx;
        margin-left: 2rpx;
        font-size: $fg-f4;
        line-height: 37rpx;
      }

      &__username {
        // display: flex;
        height: 37rpx;
        max-width: 326rpx;
        overflow: hidden;
        font-weight: bold;
        line-height: 37rpx;
        // color: rgba(51, 51, 51, 1);
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
      }

      &__isAdmin {
        display: inline-block;
        height: 37rpx;
        font-weight: 400;
        line-height: 37rpx;
        color: rgba(170, 170, 170, 1);
      }

      &__isAdminColor {
        padding: 2rpx 10rpx;
        margin-left: 15rpx;
        font-size: $fg-f1;
        background: --color(--qui-BG-IT);
        border-radius: 18rpx;
        box-sizing: border-box;
      }

      &__time {
        font-size: 24rpx;
        font-weight: 400;
        line-height: 31rpx;
        color: rgba(170, 170, 170, 1);
      }

      &__jumpBtn {
        float: right;
        width: 10rpx;
        height: 37rpx;
        font-size: 10rpx;
        line-height: 37rpx;
        color: #ddd;
      }
      &__deleteBtn {
        float: right;
      }
      &__reward {
        float: right;
        font-size: $fg-f4;
        font-weight: bold;
        color: --color(--qui-RED);
      }
    }
  }
  &__content {
    &__text {
      display: flex;
      overflow: hidden;
      flex-direction: column;
      flex-wrap: wrap;
      font-size: $fg-f4;
      line-height: 45rpx;
      word-break: break-all;
    }
  }
}
.addFine {
  position: absolute;
  top: -25rpx;
  right: 0;
  width: 31rpx;
  height: 41rpx;
}
.right40 {
  right: 40rpx;
}
.themeItem__header__follow {
  align-self: flex-start;
  width: 168rpx;
  line-height: 1;
  text-align: right;
  flex-shrink: 0;

  .icon-follow {
    margin-right: 7rpx;
    font-size: $fg-f3;
  }
}
.det-ft-operaCli {
  position: relative;
  line-height: 30rpx;
  .det-ft-more {
    display: flex;
    justify-content: flex-end;
    .icon-gengduo {
      color: --color(--qui-FC-AAA);
    }
  }
}
// 举报弹框
.popup-report {
  background: --color(--qui-BG-2);
  border-radius: 10rpx 10rpx 0rpx 0rpx;

  &__title {
    padding: 40rpx 0rpx;
    text-align: center;

    &-headline {
      font-size: $fg-f4;
      color: --color(--qui-FC-333);
    }

    &-subhead {
      margin-top: 20rpx;
      font-size: $fg-f2;
      color: --color(--qui-FC-AAA);
    }
  }

  &__content {
    padding-left: 40rpx;

    &-cell {
      display: flex;
      padding-right: 40rpx;
      line-height: 100rpx;
      border-bottom: 1px solid var(--qui-BOR-ED);
      align-items: center;
      justify-content: space-between;
    }

    &-cell:last-child {
      border-bottom: 0;
    }

    &-textarea {
      padding-right: 40rpx;

      textarea {
        width: 100%;
        height: 180rpx;
        padding: 20rpx;
        font-size: $fg-f4;
        background-color: --color(--qui-BG-1);
        border: 1px solid var(--qui-BOR-DDD);
        box-sizing: border-box;
      }
    }
  }

  &__btn {
    margin-top: 30rpx;
    background: --color(--qui-BG-ED);

    &-confirm {
      width: 100%;
      height: 100rpx;
      margin-bottom: 10rpx;
      font-size: $fg-f4;
      font-weight: normal;
      line-height: 100rpx;
      color: --color(--qui-FC-FFF);
      text-align: center;
      background: --color(--qui-MAIN);
      border-radius: 0;
    }

    &-cancel {
      width: 100%;
      height: 100rpx;
      font-size: $fg-f4;
      font-weight: normal;
      line-height: 100rpx;
      text-align: center;
      background: --color(--qui-FC-FFF);
    }
  }

  .textarea-placeholder {
    font-size: $fg-f4;
    color: --color(--qui-FC-B5);
  }
}
</style>
